<script setup>
import AvatarUsernameAccount from "@/views/my/components/AvatarUsernameAccount.vue";
import {SETTING_ROUTE} from "@/router/routes/setting/setting.js";
import {PERSONAL_ROUTE} from "@/router/routes/personal/personal.js";
import {useRouter} from "vue-router";
import {ADDRESS_LIST_ROUTE} from "@/router/routes/address/AddressList.js";
import {onBeforeMount, ref} from "vue";
import useOrderStore from "@/store/modules/OrderStore.js";
import {getAllOrderAPI} from "@/api/order.js";
import {ORDER_LIST_ROUTE} from "@/router/routes/order/OrderList.js";
import {MY_COMMENT_ROUTE} from "@/router/routes/my/MyComment.js";

const router = useRouter()

const goSetting = () => {
  router.push({name: SETTING_ROUTE})
}
const goPersonal = () => {
  router.push({name: PERSONAL_ROUTE})
}

const goAddressList = () => {
  router.push({name: ADDRESS_LIST_ROUTE})
}

const waitPayCnt = ref(0)
const waitDeliveryCnt = ref(0)
const waitReceiveCnt = ref(0)
const waitCommentCnt = ref(0)
onBeforeMount(async () => {
  useOrderStore().saveAll(await getAllOrderAPI())
  waitPayCnt.value = 0
  waitDeliveryCnt.value = 0
  waitReceiveCnt.value = 0
  waitCommentCnt.value = 0
  useOrderStore().all.forEach(
      item => {
        if (item.status === 1) {
          waitPayCnt.value++
        } else if (item.status === 2) {
          waitDeliveryCnt.value++
        } else if (item.status === 3) {
          waitReceiveCnt.value++
        } else if (item.status === 4) {
          waitCommentCnt.value++
        }
      }
  )
  waitPayCnt.value = waitPayCnt.value > 99 ? '99+' : waitPayCnt.value
  waitDeliveryCnt.value = waitDeliveryCnt.value > 99 ? '99+' : waitDeliveryCnt.value
  waitReceiveCnt.value = waitReceiveCnt.value > 99 ? '99+' : waitReceiveCnt.value
  waitCommentCnt.value = waitCommentCnt.value > 99 ? '99+' : waitCommentCnt.value
  waitPayCnt.value = waitPayCnt.value === 0 ? '' : waitPayCnt.value
  waitDeliveryCnt.value = waitDeliveryCnt.value === 0 ? '' : waitDeliveryCnt.value
  waitReceiveCnt.value = waitReceiveCnt.value === 0 ? '' : waitReceiveCnt.value
  waitCommentCnt.value = waitCommentCnt.value === 0 ? '' : waitCommentCnt.value
})

const goOrderList = (tabActive) => {
  router.push({name: ORDER_LIST_ROUTE, query: {tabActive}})
}

const goMyComment = () => {
  router.push({name: MY_COMMENT_ROUTE})
}
</script>

<template>
  <div class="my">
    <AvatarUsernameAccount></AvatarUsernameAccount>
    <van-cell @click="goOrderList(0)" class="" title="全部" is-link>
      <template #icon>
        <span class="iconfont icon-dingdan mr-2"></span>
      </template>
    </van-cell>
    <van-grid column-num="5">
      <van-grid-item text="已取消" @click="goOrderList(1)">
        <template #icon>
          <span class="iconfont icon-quxiao text-2xl dark:text-gray-100"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="待支付" @click="goOrderList(2)" :badge="waitPayCnt">
        <template #icon>
          <span class="iconfont icon-zhifu text-2xl dark:text-gray-100"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="待发货" @click="goOrderList(3)" :badge="waitDeliveryCnt">
        <template #icon>
          <span class="iconfont icon-fahuo text-2xl dark:text-gray-100"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="待收货" @click="goOrderList(4)" :badge="waitReceiveCnt">
        <template #icon>
          <span class="iconfont icon-yifahuo1 text-2xl dark:text-gray-100"></span>
        </template>
      </van-grid-item>
      <van-grid-item text="待评价" @click="goOrderList(5)" :badge="waitCommentCnt">
        <template #icon>
          <span class="iconfont icon-pingjia text-2xl dark:text-gray-100"></span>
        </template>
      </van-grid-item>
      <!--<van-grid-item text="已完成" @click="goOrderList(6)">-->
      <!--  <template #icon>-->
      <!--    <span class="iconfont icon-quxiao text-2xl dark:text-gray-100"></span>-->
      <!--  </template>-->
      <!--</van-grid-item>-->
    </van-grid>
    <van-cell @click="goMyComment" class="mt-2" title="我的评论" is-link>
      <template #icon>
        <span class="iconfont icon-pingjia2 mr-2"></span>
      </template>
    </van-cell>
    <van-cell @click="goAddressList" class="" title="收货地址" is-link>
      <template #icon>
        <span class="iconfont icon-travel-location-map mr-2"></span>
      </template>
    </van-cell>
    <van-cell @click="goPersonal" class="" title="个人信息" is-link>
      <template #icon>
        <span class="iconfont icon-wode mr-2"></span>
      </template>
    </van-cell>
    <van-cell @click="goSetting" class="mt-2" title="设置" is-link>
      <template #icon>
        <span class="iconfont icon-shezhi5 mr-2"></span>
      </template>
    </van-cell>
  </div>
</template>

<style scoped lang="scss">

</style>